<template>
	<div
		class="h-12 px-3 flex justify-between items-center rounded bg-bg-2"
		:class="{ 'cursor-pointer': isEdit }"
		@click.stop="onClick">
		<base-text :textT="titleT"></base-text>
		<div class="flex items-center text-t-3">
			<base-text :text="text"></base-text>
			<div class="ml-2" v-if="isEdit || $slots.right">
				<slot name="right">
					<base-icon name="go"></base-icon>
				</slot>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseText, BaseIcon } from '@/components/base'
const props = defineProps({
	titleT: {
		type: String,
		default: ''
	},
	text: {
		type: [Number, String],
		default: ''
	},
	isEdit: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['edit'])

const onClick = () => {
	if (props.isEdit) {
		emits('edit')
	}
}
</script>
